<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ReTxt2tags: options and other technical details</title>
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="custom.css">
  <link rel="stylesheet" href="retxt2tags.css">
</head>
<body class="rt2t-on">

<p style="margin: 1.4em 0 2.8em;">
  ReTxt2tags:
  <a href="index.html">about</a>,
  <em>details</em>,
  <a href="sampler.html">sampler</a>,
  <a href="sample.html">Original txt2tags sample</a>,
  <a href="issues.html">issues</a>
</p>

<h1>
  Options and other technical details
</h1>

<p>Disclamer: As the reTxt2tags tool is derived from reMarkdown CSS, most of the original details are no longer relevant.</p>

<p>
  You can trigger a number of options using specific classes. You can declare
  those classes on the same element you used to declare <code>rt2t-on</code>,
  on sub-containers, or on the targetted elements themselves. The stylesheet
  is rather flexible.
</p>

<h2>
  Available options
</h2>

<ul>
  <li>
    <code>rt2t-h1-uppercase</code>:
    uppercase H1.
  </li>
</ul>

<p>
  Important notes on option classes:
</p>

<ol>
  <li>
    Words in the class name are always singular: “bracket”, not “brackets”.
  </li>
  <li>
    Each option class has an equivalent which can be used on the affected
    element itself, and which omits the element name,
    <abbr title="for instance">e.g.</abbr> <code>rmd-underscore</code> on
    strong elements, <code>rmd-showurl</code> on links, etc.
  </li>
</ol>

<p>
  Note that the <code>rmd-a-printref</code> option needs the <a
  href="rmd-print.js">rmd-print.js</a> script. The script generates an
  invisible list of URLs at the end of each container with this class, and the
  print styles reveal this list when printing the page.
</p>

<h2>
  Example code
</h2>

<pre><code>&lt;!doctype html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
  &lt;title&gt;Using ReTxt2tags&lt;/title&gt;
  &lt;link rel="stylesheet" href="retxt2tags.css"&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;nav&gt;
  Site navigation
&lt;/nav&gt;
&lt;article class="rt2t-on rmd-h1-underline rmd-link-footnote rmd-hr-center"&gt;
  &lt;h1 class="rmd-uppercase"&gt;Hello World&lt;/h1&gt;
  &lt;p&gt;Goodnight, and &lt;a href="/l/"&gt;good luck&lt;/a&gt;.&lt;/p&gt;
  &lt;hr&gt;
  &lt;p&gt;More content.&lt;/p&gt;
&lt;/article&gt;
&lt;script src="rmd-print.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>

<p>
  For more examples of how you can use ReTxt2tags classes, see the <a
  href="sampler.html">sampler page</a> and take a look at the source code.
  Note that it’ll probably be easier to set all option classes on one
  container element, rather than on individual elements.
</p>

<h2>How does it work exactly?</h2>

<p>The gist of it:</p>

<ul>
  <li>
    The stylesheet sets everything to the same monospace font, font size and
    line height.
  </li>
  <li>
    Then it adds text markers at the start and end of elements, in
    <code>:before</code> and <code>:after</code> pseudo-elements.
  </li>
</ul>

<p>
  There are a few special cases, such as underlined titles, block quotes,
  ordered lists, and print styles for links. Do read <a
  href="retxt2tags.css">retxt2tags.css</a> if you speak CSS and want to know
  more.
</p>

<p>
  Note that there is a number of <a href="issues.html">known issues</a>.
</p>

  <script>var _gaq=_gaq||[['_setAccount','UA-199097-5'],['_trackPageview']];
  (function(){var ga=document.createElement('script');ga.async=true;ga.
  src='//www.google-analytics.com/ga.js';if(document.domain=='fvsch.com')
  document.querySelector('head').appendChild(ga);})();</script>

</body>
</html>
